import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import moment from 'moment';
import { connect } from 'dva';
import { Select, Table, Empty, Tag } from 'antd';
import TPage from '@/modules/TPage';
import { PayType } from '@/public/constant/enums';
import style from './index.css';
const { Option } = Select;
const { Column } = Table;
const List: React.FC<any> = ({ total, list, dispatch }) => {
  const [curPage, setCurPage] = useState(1);
  const [curPayCode, setPayCode] = useState(null);
  const pageSize = 10;
  /**
   * 加载列表数据
   */
  function fetchList({ page, payCode }) {
    dispatch({
      type: 'orderCashFlow/fetchList',
      payload: {
        page,
        pageSize,
        payCode
      }
    })
  }


  useEffect(({ page = curPage, payCode = curPayCode } = {}) => {
    fetchList({ page, payCode })
  }, [curPage, curPayCode])
  // 渲染列表查询表单

  const handleQuery = (query) => {
    setCurPage(1);
    setPayCode(query);
  }


  return (
    <TPage>
      <TPage.Title>流水</TPage.Title>
      <TPage.Table>
        <TPage.Layout className={style.action_block}>
          <TPage.Search
            placeholder={'请输入付款单号，可按回车键搜索'}
            onSearch={handleQuery}
          />
        </TPage.Layout>
        <Table
          className={classnames(style.mt16, style.expert_list)}
          locale={{ emptyText: <Empty description={'无数据'} /> }}
          dataSource={list}
          pagination={{ total, current: curPage, pageSize, onChange: setCurPage }}
          rowKey={(record: any) => record.payCode}
        >
          <Column title={'支付单号'} dataIndex={'payCode'} key={'payCode'} />
          <Column title={'支付状态'} dataIndex={'payType'} key={'payType'} render={(value) => <Tag color={value ? '#2db7f5' : '#f50'}>{PayType[value]}</Tag>} />
          <Column title={'支付金额(元)'} dataIndex={'price'} key={'price'} />
          <Column title={'下单时间'} dataIndex={'createTime'} key={'createTime'} render={(value) => moment(value).format('YYYY-MM-DD hh:mm:ss')} />
        </Table>
      </TPage.Table>
    </TPage>
  );
}
export default connect((state: any) => {
  return {
    list: state.orderCashFlow.list,
    total: state.orderCashFlow.total,
  };
})(List);
